<template>
  <a-modal title="开课课程选择" :width="1000" :visible="visible" @cancel="handleCancel">
    <a-card :bordered="false">
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="48">
            <a-col :md="12" :sm="24">
              <a-form-item label="学院">
                <a-select
                  :disabled="this.collegeList.length == 1"
                  show-search
                  allowClear
                  placeholder="请选择所属学院"
                  v-model="queryParam.collegeId">
                  <a-select-option v-for="item of collegeList" :key="item.id">
                    {{ item.name }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-item label="开课学年">
                <a-select
                  show-search
                  allowClear
                  placeholder="请选择开课学年"
                  v-model="queryParam.schoolYearId"
                  @change="changeSchoolYear">
                  <a-select-option v-for="item of schoolYearList" :key="item.id">
                    {{ item.name }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-item label="开课学期">
                <a-select show-search allowClear placeholder="请选择开课学期" v-model="queryParam.termId">
                  <a-select-option v-for="item of schoolTermList" :key="item.id">
                    {{ item.name }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <span class="table-page-search-submitButtons">
                <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
                <a-button style="margin-left: 8px" @click="() => (queryParam = {})">重置</a-button>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </a-card>
    <s-table ref="table" :columns="columns" :data="loadData" :rowKey="(record) => record.id">
      <span slot="publishState" slot-scope="text, record">
        <a-tag color="red" v-if="record.publishState === 0">未发布</a-tag>
        <a-tag color="green" v-if="record.publishState === 1">已发布</a-tag>
      </span>
      <span slot="action" slot-scope="text, record">
        <a @click="chooseOne(record)">选择</a>
      </span>
    </s-table>
  </a-modal>
</template>

<script>
import { STable, XDown } from '@/components'
import { coursePublishPageWithName } from '@/api/modular/main/coursePublishManage'
import { sysSchoolYearList } from '@/api/modular/system/sysSchoolYearManage'
import { sysSchoolTermList } from '@/api/modular/system/sysSchoolTermManage'
import { sysCollegeList } from '@/api/modular/system/sysCollegeManage'
export default {
  components: {
    STable,
    XDown
  },
  data() {
    return {
      visible: false,
      // 查询参数
      queryParam: {
        collegeId: undefined,
        courseId: undefined,
        termId: undefined,
        schoolYearId: undefined
      },
      collegeList: [],
      schoolYearList: [],
      schoolTermList: [],
      // 表头
      columns: [
        {
          title: '开课课程',
          align: 'center',
          dataIndex: 'courseName'
        },
        {
          title: '开课学年',
          align: 'center',
          dataIndex: 'schoolYearName'
        },
        {
          title: '开课学期',
          align: 'center',
          dataIndex: 'termName'
        },
        {
          title: '开课状态',
          align: 'center',
          dataIndex: 'publishState',
          scopedSlots: { customRender: 'publishState' }
        },
        {
          title: '操作',
          width: '100px',
          align: 'center',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' }
        }
      ],
      loadData: (parameter) => {
        return coursePublishPageWithName(Object.assign(parameter, this.queryParam)).then((res) => {
          return res.data
        })
      }
    }
  },
  created() {
    this.getCollegeList()
    this.getSchoolYearList()
    this.getSchoolTermList()
  },
  methods: {
    open(record) {
      this.visible = true
      if (record) {
        this.queryParam = {
          ...this.queryParam,
          collegeId: record.collegeId,
          schoolYearId: record.schoolYearId,
          termId: record.termId
        }
        if (this.$refs.table) this.$refs.table.refresh(true)
      }
    },
    handleCancel() {
      this.visible = false
    },
    /**
     * load学年列表
     */
    getSchoolYearList() {
      sysSchoolYearList().then((res) => {
        if (res.success) {
          this.schoolYearList = res.data
        }
      })
    },
    /**
     * load开课学期
     */
    getSchoolTermList(schoolYearId) {
      sysSchoolTermList({
        schoolYearId: schoolYearId
      }).then((res) => {
        if (res.success) {
          this.schoolTermList = res.data
        }
      })
    },
    /**
     * load学院列表
     */
    getCollegeList() {
      sysCollegeList().then((res) => {
        if (res.success) {
          this.collegeList = res.data
          if (this.collegeList.length === 1) {
            // 如果只有一条，默认选上
            this.queryParam.collegeId = this.collegeList[0].id
          }
        }
      })
    },
    chooseOne(record) {
      this.$emit('ok', record)
      this.visible = false
    },
    changeSchoolYear(schoolYearId) {
      this.queryParam.termId = undefined
      this.getSchoolTermList(schoolYearId)
    }
  }
}
</script>
